<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue-列表|事件监听</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

    <!-- 用v-on:事件名称 这样的方法监听事件 -->
    <div id="app-1">
        <button v-on:click="counter +=1">+1</button>
        <p>这个按钮被点击了{{ counter}} 次</p>
    </div>
    <!-- 点击事件绑定方法 -->
    <div id="app-2">
        <button v-on:click="greet">Greet</button>
    </div>
    <!-- 绑定同时想传参数(内联|inline) -->
    <div id="app-3">
        <button v-on:click="say('hi')">Say Hi</button>
        <button v-on:click="say('hello')">Say Hello</button>
    </div>

    <!-- 绑定同时想传参数+原生的DOM事件捕捉，需要用的特殊变量$event -->
    <div id="app-4">
        <button v-on:click="warn('表单暂时还不能提交',$event)">warn</button>
    </div>

    <!--
        虽然可以通过代码调用event.preventDefault() 或 event.stopPropagation()
        阻止事件传播，但是毕竟这不算太优雅的方法实现。为了避免这种代码侵入到事件处理
        方法中，vue提供了很多有用的事件修饰符，用于事件处理
    -->
    <div id="event-pres">
        <!-- 阻止单击事件冒泡 -->
        <a v-on:click.stop="doThis"></a>
        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>
        <!-- 修饰符可以串联  -->
        <a v-on:click.stop.prevent="doThat"></a>
        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>
        <!-- 添加事件侦听器时使用事件捕获模式 -->
        <div v-on:click.capture="doThis">...</div>
        <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
        <div v-on:click.self="doThat">...</div>
        <!-- 点击事件将只会触发一次,2.1.4 新增 -->
        <a v-on:click.once="doThis"></a>
    </div>

    <!-- 键盘事件监听 -->
    <div id="keyboard-event">
        <!-- 只有在 keyCode 是 13（就是回车） 时调用 vm.submit() -->
        <input v-on:keyup.13="submit">
        <!-- 基于别名-->
        <input v-on:keyup.enter="submit">
        <!-- 基于缩写语法-->
        <input @keyup.enter="submit">

    </div>

    <!--
        按键别名有如下：
        .enter 回车
        .tab tab键
        .delete （删除或者退格键）
        .esc 退出
        .space 空格
        .up 上
        .down 下
        .left 左
        .right 右

        还可以用个config.keyCode 自定义自己的键盘按钮别名
        // 可以使用 v-on:keyup.f1
        Vue.config.keyCodes.f1 = 112
    -->

    <!-- 多个按键组合监控 -->
    <!-- Alt + C -->
    <input @keyup.alt.67="clear">
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>


</body>
<script>
    var app1 = new Vue({
        el: '#app-1',
        data: {
            counter: 0
        }
    })

    var app2 = new Vue({
        el: '#app-2',
        data: {
            name: 'Vue.js'
        },
        methods: {
            greet: function (event) {
                alert('你好，' + this.name + '!')
                alert(event.target.tagName)
            }
        }

    })
    // 直接调用,event为空
    // app2.greet() //这里会报错，由于event为空

    var app3 = new Vue({
        el: '#app-3',
        data: {
        },
        methods: {
            say: function (msg) {
                alert('你好，' + msg + '!')
            }
        }

    })

    var app4 = new Vue({
        el: '#app-4',
        data: {
        },
        methods: {
            warn: function (msg, event) {
                //阻止原生的事件
                if (event) event.preventDefault()

                alert('你好，' + msg + '!')
            }
        }

    })

    var keyboardEvent = new Vue({
        el:'#keyboard-event',
        data:{
            
        },
        methods:{
            submit:function(){
                alert('你按了回车!')
            }
        }
    })

</script>

</html>